<template>
    <div class="order-detail-container">
      <!-- 工具栏 -->
      <div class="toolbar">
        <el-button-group>
          <el-button type="primary" icon="el-icon-back" size="small" @click="goBack">返回</el-button>
          <el-button type="primary" icon="el-icon-printer" size="small">打印</el-button>
          <el-button type="success" icon="el-icon-edit" size="small">编辑</el-button>
        </el-button-group>
      </div>
  
      <!-- 基本信息 -->
      <div class="detail-section">
        <div class="section-title">
          <i class="el-icon-document"></i>
          <span>基本信息</span>
        </div>
        <el-form :model="orderInfo" label-width="120px" class="detail-form">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="订单编号">
                <span>{{ orderInfo.orderId }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="客户名称">
                <span>{{ orderInfo.customerName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="订单来源">
                <span>{{ orderSourceMap[orderInfo.orderSource] }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="运输方式">
                <span>{{ transportTypeMap[orderInfo.transportType] }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="下单日期">
                <span>{{ orderInfo.orderDate }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="订单状态">
                <el-tag :type="getStatusType(orderInfo.orderStatus)">
                  {{ orderStatusMap[orderInfo.orderStatus] }}
                </el-tag>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="是否急单">
                <el-tag :type="orderInfo.isUrgent ? 'danger' : 'info'">
                  {{ orderInfo.isUrgent ? '是' : '否' }}
                </el-tag>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="是否可拆">
                <el-tag :type="orderInfo.isSplittable ? 'success' : 'info'">
                  {{ orderInfo.isSplittable ? '是' : '否' }}
                </el-tag>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="订单备注">
                <span>{{ orderInfo.orderRemark || '暂无备注' }}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
  
      <!-- 发货信息 -->
      <div class="detail-section">
        <div class="section-title">
          <i class="el-icon-truck"></i>
          <span>发货信息</span>
        </div>
        <el-form :model="orderInfo" label-width="120px" class="detail-form">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="发货单位">
                <span>{{ orderInfo.fUnitName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="联系人">
                <span>{{ orderInfo.fContactPerson }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="联系电话">
                <span>{{ orderInfo.ftelephone }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="联系手机">
                <span>{{ orderInfo.fmobilePhone }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="省">
                <span>{{ orderInfo.fprovince }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="市">
                <span>{{ orderInfo.fcity }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="区县">
                <span>{{ orderInfo.fcounty || '未签收' }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="发货详细地址">
                <span>{{ orderInfo.fdetailedAddress }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="取货时间说明">
                <span>{{ orderInfo.fpickupTimeNote }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="要求提货日期">
                <span>{{ orderInfo.frequiredPickupDate }}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
  
      <!-- 收货信息 -->
      <div class="detail-section">
        <div class="section-title">
          <i class="el-icon-location"></i>
          <span>收货信息</span>
        </div>
        <el-form :model="orderInfo" label-width="120px" class="detail-form">
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="收货单位">
                <span>{{ orderInfo.sunitName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="联系人">
                <span>{{ orderInfo.scontactPerson }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="联系电话">
                <span>{{ orderInfo.stelephone }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="联系手机">
                <span>{{ orderInfo.smobilePhone }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="省">
                <span>{{ orderInfo.sprovince }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="市">
                <span>{{ orderInfo.scity }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="区县">
                <span>{{ orderInfo.scounty || '未签收' }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="收货详细地址">
                <span>{{ orderInfo.sdetailedAddress }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="回单类型">
                <span>{{ receiptTypeMap[orderInfo.sreceiptType] }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="要求到货日期">
                <span>{{ orderInfo.srequiredDeliveryDate }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="签收时间">
                <span>{{ orderInfo.signoffTime || '未签收' }}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
  
      <!-- 货物明细 -->
      <div class="detail-section">
        <div class="section-title">
          <i class="el-icon-goods"></i>
          <span>货物明细</span>
        </div>
        <el-table
          :data="orderInfo.orderGoods"
          border
          style="width: 100%"
          :header-cell-style="{ background: '#f5f7fa' }"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="goodName" label="货物名称"></el-table-column>
          <el-table-column prop="amount" label="数量" width="80"></el-table-column>
          <el-table-column prop="unitWeight" label="单件重量(千克)" width="120"></el-table-column>
          <el-table-column prop="length" label="长(米)" width="80"></el-table-column>
          <el-table-column prop="width" label="宽" width="80"></el-table-column>
          <el-table-column prop="hight" label="高" width="80"></el-table-column>
          <el-table-column prop="goodVolume" label="单件体积" width="100">
            <template slot-scope="scope">
              {{ scope.row.goodVolume }} m³
            </template>
          </el-table-column>
          <el-table-column prop="subtotalVolume" label="体积小计" width="100">
            <template slot-scope="scope">
              {{ scope.row.subtotalVolume }} m³
            </template>
          </el-table-column>
          <el-table-column prop="subtotalWeight" label="重量小计" width="100">
            <template slot-scope="scope">
              {{ scope.row.subtotalWeight }} kg
            </template>
          </el-table-column>
        </el-table>
        
        <!-- 合计信息 -->
        <div class="goods-summary">
          <span>总数量：{{ orderInfo.totalAmount || 0 }}</span>
          <span>总重量：{{ orderInfo.totalWeight || 0 }} kg</span>
          <span>总体积：{{ orderInfo.totalVolume || 0 }} m³</span>
        </div>
      </div>
  
      <!-- 费用信息 -->
      <div class="detail-section">
        <div class="section-title">
          <i class="el-icon-money"></i>
          <span>费用信息</span>
        </div>
        <el-form :model="orderInfo" label-width="120px" class="detail-form">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="重量运费单价">
                <span>￥{{ orderInfo.weightFreightRate }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="体积运费单价">
                <span>￥{{ orderInfo.volumeFreightRate }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="运输距离">
                <span>{{ orderInfo.distance }}km</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="运费合计">
                <span class="price">￥{{ orderInfo.totalFreightCost }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="整送附加费">
                <span>￥{{ orderInfo.nonSplitSurcharge }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="专送附加费">
                <span>￥{{ orderInfo.urgentSurcharge }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="费用合计">
                <span class="price-total">￥{{ orderInfo.totalCost }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="预付款">
                <span class="price-advance" >￥{{ orderInfo.advancePay }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="剩余待付">
                <span class="price-remaining">￥{{ orderInfo.remainingPayment }}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
  
      <!-- 银行账户信息 -->
      <div class="detail-section">
        <div class="section-title">
          <i class="el-icon-bank"></i>
          <span>银行账户信息</span>
        </div>
        <el-form :model="orderInfo" label-width="120px">
          <el-form-item label="客户银行信息">
            <div class="bank-info-content">
              <p><label>收款单位：</label>{{ orderInfo.paymentUnit || '-' }}</p>
              <p><label>开户行：</label>{{ orderInfo.bankName || '-' }}</p>
              <p><label>账号：</label>{{ orderInfo.accountNumber || '-' }}</p>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        orderInfo: {},
        orderSourceMap: {
          1: '小程序下单',
          2: '手工录入'
        },
        transportTypeMap: {
          1: '公路运输',
          2: '铁路运输',
          3: '航空运输',
          4: '海洋运输'
        },
        orderStatusMap: {
          1: '已下单',
          2: '已取消',
          3: '未完成',
          4: '已完成',
          5: '已结算'
        },
        receiptTypeMap: {
          1: '电子回单',
          2: '纸质回单'
        }
      }
    },
  
    methods: {
      // 获取订单详情
      getOrderDetail() {
        const orderId = this.$route.query.orderId
        this.loading = true
        this.$axios.get(`api/order/queryDetail/`+orderId)
        .then(res => {
          if (res.data.code === 200) {
            this.orderInfo = res.data.data
          } else {
            this.$message.error(res.msg || '获取订单详情失败')
          }
        }).finally(() => {
          this.loading = false
        })
      },
  
      // 获取完整地址
    //   getFullAddress(type) {
    //     const info = this.orderInfo
    //     return type === 'f' 
    //       ? `${info.fProvince}${info.fCity}${info.fCounty}${info.fDetailedAddress}`
    //       : `${info.sProvince}${info.sCity}${info.sCounty}${info.sDetailedAddress}`
    //   },
  
      // 获取状态标签类型
      getStatusType(status) {
        const typeMap = {
          1: 'primary',
          2: 'danger',
          3: 'warning',
          4: 'success',
          5: 'info'
        }
        return typeMap[status] || 'info'
      },
  
      // 返回上一页
      goBack() {
        this.$router.go(-1)
      }
    },
  
    created() {
      this.getOrderDetail()
    }
  }
  </script>
  
  <style scoped>
  .order-detail-container {
    padding: 20px;
    background-color: #f5f7fa;
    min-height: 100%;
  }
  
  .toolbar {
    margin-bottom: 20px;
  }
  
  .detail-section {
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
    margin-bottom: 20px;
    padding: 20px;
  }
  
  .section-title {
    border-bottom: 1px solid #ebeef5;
    padding-bottom: 15px;
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: 500;
    color: #303133;
  }
  
  .section-title i {
    margin-right: 8px;
    color: #409EFF;
  }
  
  .detail-form {
    padding: 10px;
  }
  
  .el-form-item {
    margin-bottom: 20px;
  }
  
  .price {
    color: #409EFF;
    font-weight: bold;
  }
  
  .price-total {
    color: #67C23A;
    font-weight: bold;
    font-size: 16px;
  }
  
  .price-advance {
    color: #b23ac2;
    font-weight: bold;
    font-size: 16px;
  }

  .price-remaining {
    color: #F56C6C;
    font-weight: bold;
  }
  
  /* 响应式调整 */
  @media screen and (max-width: 1200px) {
    .el-col {
      margin-bottom: 10px;
    }
  }
  
  .goods-summary {
    margin-top: 15px;
    padding: 10px;
    background-color: #f5f7fa;
    border-radius: 4px;
  }
  
  .goods-summary span {
    margin-right: 30px;
    font-weight: bold;
    color: #606266;
  }
  
  .bank-info-content {
    padding: 10px;
    background-color: #f5f7fa;
    border-radius: 4px;
  }
  
  .bank-info-content p {
    margin: 5px 0;
    line-height: 24px;
  }
  
  .bank-info-content label {
    display: inline-block;
    width: 80px;
    color: #606266;
  }

  /* el-col{
    border-top: 1px dashed #ebeef5;
  } */
  </style>